<template>
	<view class="attention-page" :class="themeType==='light'?'bgc-light-deep':'bgc-deep'">
		<view class="follow-list">
			<navigator :url="'/pages/user/fansinfo?id='+item.userId" class="follow-list-item" v-for="item in follow" :key="item.userId">
				<image :src="item.avatarUrl" :lazy-load="true" mode="widthFix"></image>
				<view class="right-info">
					<text class="name ft">{{item.nickname}}</text>
				</view>
			</navigator>
		</view>
		<myuni-player  :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				currntSong:{},
				page:0,
				follow:[]
			}
		},
		onLoad() {
			if(!this.userInfo){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.initCurrntSong()
			this.getFollows()
		},
		onShow() {
		 this.initCurrntSong()
		  if(!this.userInfo){
		  	uni.navigateTo({
		  		url:"/pages/login/login"
		  	})
		  }
		},
		computed:{
			...mapState(['themeType','cookie','userInfo'])
		},
		methods: {
			getFollows(){
				this.request({
					url:"/user/follows?uid="+this.userInfo.profile.userId+"&offset="+this.page*30
				}).then(res=>{
					this.follow=res.follow
					this.page++
				})
			},
			initCurrntSong(){
				if(uni.getStorageSync('music').url){
					var music = uni.getStorageSync('music')
					if(music.playing){
						delete music.url
					}
					this.currntSong = music
				}
			},
			ChangeSong(isNext){
				let playlist=uni.getStorageSync('playlist')
				if(isNext){
					var index
					this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
				}else{
					var index
					this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
				}
				playlist[index].index=index
				if(this.currntSong.type==='playlist'){
					this.getSong(playlist[index])
				}
				else if(this.currntSong.type==='newMusic'){
					this.enterNewMusic(playlist[index])
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.attention-page{
	padding: 56rpx 20rpx 100px;
	.follow-list{
	    .follow-list-item{
			margin: 20rpx 0;
			display: flex;
			border-radius: 20rpx;
			overflow: hidden;
			image{
				width: 100rpx;
				height: 100rpx;
			}
			.right-info{
				padding: 0 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name{
					// color: #fff;
					font-size: 32rpx;
				}
			}
		} 
	}
}
</style>
